<template>
  <div class="main pb20 pt116">
    <div class="padding-tb-15">
      <Breadcrumb separator="">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadSeparator>:</BreadSeparator>
        <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
        <BreadSeparator>></BreadSeparator>
        <BreadcrumbItem>竣工验收备案信息查询</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <Collapse v-model:activeKey="frontShow.activeKey" expandIconPosition="right">
      <CollapsePanel key="1" header="筛选条件">
        <div class="comp-query">
          <div class="comp-query-form">
            <Form :wrapper-col="{ span: 18 }">

              <Row :gutter="[24, 24]">
                <Col :span="8">
                  <FormItem label="项目名称">
                    <Input
                        v-model:value="queryParam.name"
                        placeholder="请输入项目名称"
                    />
                  </FormItem>
                </Col>
                <Col :span="8" >
                  <FormItem label="备案编码" :wrapper-col="{ span: 16 }">
                    <Input
                        v-model:value="queryParam.code"
                        placeholder="请输入备案编码"
                    />
                  </FormItem>
                </Col>


                <Col :span="8">
                  <FormItem label="项目区划">
                    <Cascader v-model:value="HisValue" change-on-select expandTrigger="hover"
                       :field-names="{ label: 'regionName', value: 'regionCode', children: 'children' }"
                       :options="frontShow.options" @change="regionChange"
                       placeholder="请选择企业注册地">
                    </Cascader>
                  </FormItem>
                </Col>

              </Row>
              <Row :gutter="[24, 14]">
                <Col :span="8">
                  <FormItem label="备案日期">
                    <RangePicker v-model:value="date" :locale="locale" @change="onchange"/>
                  </FormItem>
                </Col>
                <Col :span="8">
                </Col>
                <Col :span="8" class="text-right">
                  <Button type="primary" ghost @click="handleReset"
                    >重置</Button
                  >
                  <Button type="primary" @click="handleSearch">立即查询</Button>
                </Col>
              </Row>
              <Row :gutter="[24, 24]">
                <Col :span="24">
                  查询结果：共<span class="red">{{ pagination.total }}</span
                >条数据
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </CollapsePanel>
    </Collapse>
    <div class="comp-table">
      <Table
        :dataSource="dataSource"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :rowKey="(dataSource,i) => i"
        @change="handleTableChange"
      >
        <template #num="{ index }">
          <span>{{
            (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
          }}</span>
        </template>

        <template #name="{ text , record }">
          <span class="blue pointer" @click="permitDetail(record)">详情</span>
        </template>
      </Table>
    </div>

    <Modal v-model:visible="visibleRef" :width="900" title="竣工验收备案信息详情"
           :footer="null" :centered="true">
      <detail :detail="swDetail"/>
    </Modal>
  </div>
</template>

<script lang="ts" >
import {
  defineComponent,
  ref,
  onMounted,
  reactive,
  PropType
} from "vue";
import {
  Row,
  Col,
  Form,
  Input,
  Button,
  DatePicker,
  Table,
  Breadcrumb,
  Collapse,
  Cascader,
  Modal
} from "ant-design-vue";
import { useRouter } from "vue-router";
import {getFinishApi, Option , pageConfig } from "/@/api/servicemore";
import { getRegionProv} from '/@/api/pro';
import {parseTime} from "/@/utils";
import { Moment } from 'moment';
import detail from './detail.vue';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

interface queryConfig {
  name: string;
  regionCode: string;
  code: string;
  baEndDate: string;
  baStartDate:string;
  current: number;
  size: number;
}


//备案编码、单位工程名称、项目名称、备案日期、备案机构、详情
const columns = [
  {
    title: "序号",
    width: 100,
    align: "center",
    slots: { customRender: "num" }
  },
  {
    title: "备案编码",
    width: 180,
    dataIndex: "jgbaCode"
  },
  {
    title: "单位工程名称",
    width: 200,
    dataIndex: "singleName"
  },
  {
    title: "项目名称",
    dataIndex: "projectName",
    width: 220
  },
  {
    title: "备案日期",
    dataIndex: "jgbaBaDate",
    customRender: ({ text })=> parseTime(text),
    width: 110
  },
  {
    title: "备案机构",
    dataIndex: "jgbaBaUnit",
    width: 200
  },
  {
    title: "详情",
    dataIndex: "dwgcJgbaId",
    width: 80,
    slots: { customRender: "name" }
  }
];

export default defineComponent({
  components: {
    Row, Col,  Form, FormItem: Form.Item, Input, Button,
    Table, Breadcrumb, BreadcrumbItem: Breadcrumb.Item,Modal,
    BreadSeparator: Breadcrumb.Separator,DatePicker,RangePicker:DatePicker.RangePicker,
    Collapse, CollapsePanel: Collapse.Panel,Cascader,detail
  },
  setup() {

    const router = useRouter();
    const date = ref<Moment[]>([]);
    const loading = ref<boolean>(true);
    const visibleRef = ref(false);
    const dataSource = ref<unknown[]>([]);
    const HisValue = ref<string[]>([]);
    const swDetail = ref({});
    const certTypeRef = ref<unknown[]>([]);
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10, //每页中显示10条数据
    });

    let queryParam = reactive<queryConfig>({
      name: "",
      regionCode: "",
      code: "",
      baEndDate: "",
      baStartDate: "",
      current: 1,
      size: 10
    });

    const frontShow = reactive({
      activeKey:['1'],
      options : [] as PropType<Option[]>,
    })
    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    };

    const getTableList = async () => {
      loading.value = true;
      let data = await getFinishApi(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records || [];
      loading.value = false;
    };

    const permitDetail =  (x) => {
      loading.value = true;
      visibleRef.value = true;
      swDetail.value = x;
      loading.value = false;
    };



    const handleSearch = () => {

      queryParam.current = 1;
      paginationRef.value.current = 1;
      getTableList();
    };

    const handleReset = () => {
      router.push({
        query: { search: "" },
      });
      date.value = [];
      HisValue.value = [];
      paginationRef.value.current = 1;
      Object.assign(queryParam, {
        name: "",
        regionCode: "",
        code: "",
        baEndDate: "",
        baStartDate: "",
        current: 1,
      });
      getTableList();
    };

    const methodRegion = async () => {
      const data = await getRegionProv({code:65});
      frontShow.options = data[0].children
    }

    const regionChange = (value)=>{
      if(value){
        queryParam.regionCode = value[value.length-1]
      }
    }

    const onchange =  function (value:Moment[],dateString: string[]){
      queryParam.baStartDate = dateString[0];
      queryParam.baEndDate = dateString[1];
    }

    onMounted(() => {
      getTableList();
      methodRegion()
    });


    return {
      regionChange,
      queryParam,
      dataSource,
      columns,
      loading,
      pagination: paginationRef,
      getTableList,
      handleSearch,
      handleReset,
      handleTableChange,
      certTypeRef,
      frontShow,
      onchange,
      date,
      HisValue,
      visibleRef,
      permitDetail,
      swDetail,
      locale
    };
  },
});
</script>

<style lang="less">
.comp-query {
  .ant-form-item-label {
    > label {
      color: @grey;
    }
  }

  .ant-form-item {
    margin-bottom: 0;
  }

  .ant-btn {
    margin-right: 16px;

    &:last-child {
      margin-right: 22px;
    }
  }
}
</style>

<style lang="less" scoped>
::v-deep(.ant-table-thead) {
  tr {
    th {
      background: #fff;
    }
  }
}

.comp-query {
  padding: 2px 5px;
  background: @white;

   ::v-deep(.ant-form-item-label) {
    > label {
      color: @grey;
    }
  }

  ::v-deep(.ant-form-item) {
    margin-bottom: 0;
  }

  ::v-deep(.ant-btn) {
    margin-right: 16px;

    &:last-child {
      margin-right: 22px;
    }
  }
}

.comp-table {
  padding: 10px 30px;
  margin-top: 15px;
  background: @white;

}

::v-deep(.ant-form-item-children){
  .ant-calendar-range-picker-input{
    margin-bottom: 0;
  }
}

</style>
